<template>
	<div class="line11">
		<div id="line11" class="" style="width: 100%;height:240px;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts/lib/echarts';
	// 引入柱状图
	import 'echarts/lib/chart/bar';
	import 'echarts/lib/chart/line';
	import 'echarts/lib/component/title';
	import 'echarts/lib/component/legend';
	import 'echarts/lib/component/toolbox';
	import 'echarts/lib/component/markPoint';
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/datazoom';
	import 'echarts/lib/component/markPoint';
	// import 'echarts/lib/component/timeline';
	export default {
		mounted() {
			this.myChart = echarts.init(document.getElementById('line11'));
			this.initData();
			console.log('echart_data!!!!!!!!!', this.echart_data)
		},
		props: ['series', 'echart_data'],
		methods: {
			initData() {
				const option = {

					grid: [{
							left: '5%',
							right: '5%',
							top: '15%',
							height: '70%'
						},

					],
                    legend: {
                        // orient: 'vertical',
                        // left: 'left',
						top:'0%',
                        // data: ['pnl_profit','pnl_ret','pnl_amount',]
                    },
					tooltip: {
						trigger: 'axis',
						formatter: "利润:{c0}<br>净利润:{c1}<br>成交量:{c2}<br>时间:{b}"
					},

					xAxis: [{
						type: 'category',
						// type: 'time',
						boundaryGap: ['0%', '0%'],
						// data: this.echart_point,
						data: this.echart_data['time'],

					}, ],
					dataZoom: [{
						type: 'slider',
						show: true,
						start: 0,
						end: 100,
						bottom: '0%',
						xAxisIndex: [0, ]
					}],
					yAxis: [{
							name: '利润',
							type: 'value',
							min: 'dataMin',
							max: 'dataMax',
							
						},
						{
							name: '成交量',
							type: 'value',
							min: 'dataMin',
							max: 'dataMax',
								
						},

					],
					series: this.series,
				};
				this.myChart.clear();
				this.myChart.setOption(option);
			}
		},
		watch: {
			series: function() {
				this.initData()
				console.log(this.series, 'series')
			},
			echart_data: function() {
				this.initData()
				//console.log(this.echart_data, 'echart_data')
			}
		}
	}
</script>

<style>
	.line1 {
		display: flex;
		justify-content: center;
	}
</style>
